import React from 'react';

import styles from './RegisterModel.css';

import {Modal, Button, Input, Icon, message, Select} from 'antd';
import {LoginModelPros} from "./LoginModelPros";
import Form from "antd/lib/form/Form";
import LoginService from "../business/login/LoginService";
import {ResponseBody} from "./http/ResponseBody";

const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

class RegisterModel extends React.Component<LoginModelPros,{}> {
  constructor(props){
    super(props)
    this.state = {  modalRegister:false,}
    this.loginService = new LoginService();
    this.handleChange = this.handleChange.bind(this);
    this.loginCallBack = this.loginCallBack.bind(this);
    this.adminRegisterCallBack = this.adminRegisterCallBack.bind(this);
    this.selectRole =this.selectRole.bind(this);

  }

  loginService :LoginService;


  setModal2Visible(modalRegister) {
    this.props.funcDis();
    if(!modalRegister){
      this.state["username"]='';
      this.state["password"]='';
    }
  }

  handleChange(event) {
    this.setState({ [event.target.name] : event.target.value});
  }

  handleSubmit = (e) => {
    e.preventDefault();
  }

  loginCallBack(data:ResponseBody<any>,isSuccess,req){
    if(!isSuccess){
      message.info(data.message);
    }else{
      if(data.code == "200"){
        sessionStorage.setItem("loginToken",data.data.toString());
        sessionStorage.setItem("username",req.username);

        this.setModal2Visible(false);
      }else {
        message.info(data.message);
      }
    }
    this.setState({ loading: false });
  }

  adminRegisterCallBack(data:ResponseBody<any>,isSuccess,req){
    if(!isSuccess){
      message.info(data.message);
    }else{
      if(data.code == "200"){
        message.info("注册成功请等待审核");
      }else {
        message.info(data.message);
      }
    }
    this.setState({ loading: false });
  }

  handleOk = () => {
    this.setState({ loading: true });
    let username = this.state["username"];
    let password = this.state["password"];
    let role = this.state["role"];
    let host = this.state["host"];
    if(username == undefined ||username == ''){
      message.info("用户名不能为空");
      return;
    }
    if(password == undefined ||password == ''){
      message.info("密码不能为空");
      return;
    }
    if(role == undefined ||role == ''){
      message.info("角色不能为空");
      return;
    }
    if(host == undefined ||host == ''){
      message.info("组织不能为空");
      return;
    }
    const data ={
      "username":username,
      "password":password,
      "role":role,
      "host":host,
    };
    this.loginService.adminRegister(data,this.adminRegisterCallBack);


  }
  selectRole(value) {
    this.setState({ "role" : value});
  }



  render() {
    return (
      <div>
        <Modal
          width="550px"
          title="管理员注册"
          centered
          visible={this.props.visible}
          onOk={() => this.setModal2Visible(false)}
          onCancel={() => this.setModal2Visible(false)}
          footer={[<Button key="submit" type="primary" loading={this.state["loading"]} onClick={this.handleOk}>
            注册
          </Button>]}
        >
          <Form onSubmit={this.handleSubmit} className={styles["login-form"]}>
            <div className={styles["login-div"]}>
            <Form.Item
              {...formItemLayout}
              label="用户名">
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                   placeholder="Username" value={this.state["username"]}
                   name='username' onChange={this.handleChange}/>

            </Form.Item>
            </div>
            <div className={styles["login-div"]}>
            <Form.Item
              {...formItemLayout}
              label="密 码"
            >
                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                       type="password" placeholder="Password" value={this.state["password"]}
                       name='password' onChange={this.handleChange}/>

            </Form.Item>
            </div>
            <div>
              <Form.Item
                {...formItemLayout}
                label="角 色"
                hasFeedback
              >
                  <Select placeholder="请选择角色" onChange={this.selectRole}>
                    <Option value="ROLE_RP_SYSTEM">积分授予系统</Option>
                    <Option value="ROLE_RP_ADMIN">积分操作管理员</Option>
                    {/*<Option value="ROLE_CP_ADMIN">积分商城管理员</Option>*/}
                  </Select>
              </Form.Item>
            </div>
            <div className={styles["login-div"]}>
              <Form.Item
                {...formItemLayout}
                label="组 织">
                <Input
                       placeholder="host" value={this.state["host"]}
                       name='host' onChange={this.handleChange}/>

              </Form.Item>
            </div>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default RegisterModel
